import { ReactElement } from 'react'
import { Form, Space } from 'antd'
import style from './index.module.less'
import moment, { Moment } from 'moment'

const { Item } = Form

interface TextProps {
  value?: Array<{ type: string, begin_datetime: Moment, end_datetime: Moment, days: number }>
}

function Text ({ value }: TextProps): ReactElement {
  if (!(value instanceof Array)) {
    return <div>无</div>
  }
  const list = value.filter(li => li.type === 'string' && li.begin_datetime instanceof moment && li.end_datetime instanceof moment)
  if (list.length === 0) {
    return <div>无</div>
  }
  return (
    <div>
      {list.map((li, i) => {
        return (
          <div key={i} className={style['text-line']}>
            <span className={style.order}>{i + 1}</span>
            <Space size={24}>
              <span>类型：{typeof li.type === 'string' ? li.type : '无'}</span>
              <span>开始时间：{li.begin_datetime instanceof moment ? li.begin_datetime.format('YYYY-MM-DD') : '无'}</span>
              <span>结束时间：{li.end_datetime instanceof moment ? li.end_datetime.format('YYYY-MM-DD') : '无'}</span>
              <span>共 {li.days} 天</span>
            </Space>
          </div>
        )
      })}
    </div>
  )
}

interface Props {
  name: string
}

function Main ({ name }: Props): ReactElement {
  return (
    <Item name={name} noStyle>
      <Text />
    </Item>
  )
}

export default Main
